import React, { Component, forwardRef } from "react";

class Child1 extends Component {
  state = {
    count: 10,
  };
  render() {
    return <div>child1组件</div>;
  }
}

// forwardRef是一个高阶组件
// forwardRef作用就是给函数组件用来传递ref
const Child2 = forwardRef((props, ref) => {
  return <div ref={ref}>child2组件</div>;
});

class App extends Component {
  c1 = React.createRef();
  c2 = React.createRef();

  // 使用createRef只能获取到类组件的实例
  // 不能获取函数组件的实例，函数组件是没有实例的

  // 但是我们可以通过forwardRef高阶组件来获取到函数组件里面的元素
  fn = () => {
    console.log(this.c1.current);
  };

  fn2 = () => {
    console.log(this.c2.current);
  };

  render() {
    return (
      <>
        <h2>ref获取子组件实例</h2>
        <Child1 ref={this.c1} />
        <button onClick={this.fn}>btn</button>
        <hr />
        <Child2 ref={this.c2} />
        <button onClick={this.fn2}>btn</button>
      </>
    );
  }
}

export default App;
